<template>
  <div class="eq-left">
    <div class="eq-left-top">
      <div class="eq-left-top-title">
        <img src="../../../assets/images/home-page/eq-right.png" alt="" />
        设备统计
      </div>
      <div class="eq-left-top-content">
        <div class="eq-left-top-content-item" v-for="(item, index) in countParamList" :key="index">
          <div class="eq-left-top-content-item-title">
            <img v-if="item.deviceType === '主变压器'" src="../../../assets/images/home-page/it-01.png" alt="" />
            <img v-if="item.deviceType === '所用变'" src="../../../assets/images/home-page/it-02.png" alt="" />
            <img v-if="item.deviceType === '电流互感器'" src="../../../assets/images/home-page/it-03.png" alt="" />
            <img v-if="item.deviceType === '隔离开关'" src="../../../assets/images/home-page/it-04.png" alt="" />
            <img v-if="item.deviceType === '电压互感器'" src="../../../assets/images/home-page/it-05.png" alt="" />
            <img v-if="item.deviceType === '组合电器'" src="../../../assets/images/home-page/it-06.png" alt="" />
            <img v-if="item.deviceType === '断路器'" src="../../../assets/images/home-page/it-07.png" alt="" />
            <img v-if="item.deviceType === '避雷器'" src="../../../assets/images/home-page/it-08.png" alt="" />
            <img v-if="item.deviceType === '避雷针'" src="../../../assets/images/home-page/it-09.png" alt="" />
            <img v-if="item.deviceType === '电抗器'" src="../../../assets/images/home-page/it-10.png" alt="" />
            <img v-if="item.deviceType === '电力电容器'" src="../../../assets/images/home-page/it-11.png" alt="" />
            <img v-if="item.deviceType === '放电线圈'" src="../../../assets/images/home-page/it-12.png" alt="" />
            <img v-if="item.deviceType === '刀闸'" src="../../../assets/images/home-page/it-13.png" alt="" />
            <img v-if="item.deviceType === '接地刀闸'" src="../../../assets/images/home-page/it-14.png" alt="" />
          </div>
          <div class="eq-left-top-content-item-right">
            <div class="eq-left-top-content-item-r-title">
              <img src="../../../assets/images/home-page/it-right.png" alt="" />
              <span>{{ item.deviceType }}</span>
            </div>
            <div class="eq-left-top-content-item-vaule">
              <span>{{ item.count }}</span>
              <span>(台)</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="eq-left-bottom">
      <div class="eq-left-bottom-title">
        <img src="../../../assets/images/home-page/eq-right.png" alt="" />
        设备统计
      </div>
      <div class="eq-left-bottom-item">
        <div class="eq-left-bottom-item-top">
          <div class="eq-b-top" v-for="(item, index) in deviceClassifyList" :key="index">
            <div class="eq-b-top-bg"> {{ item.count }} </div>
            <div class="eq-b-title">{{ item.deviceClassify }}</div>
          </div>
          <!-- <div class="eq-b-top-b">
            <div class="eq-b-top-bg"> {{ deviceClassify.af }} </div>
            <div class="eq-b-title">安防</div>
          </div>
          <div class="eq-b-top">
            <div class="eq-b-top-bg"> {{ deviceClassify.sp }} </div>
            <div class="eq-b-title">视频</div>
          </div>
          <div class="eq-b-top-b">
            <div class="eq-b-top-bg"> {{ deviceClassify.xf }} </div>
            <div class="eq-b-title">消防</div>
          </div> -->
        </div>
        <div class="eq-left-bottom-item-bottom">
          <div class="eq-left-bottom-item-b-l" v-for="(item, index) in deviceList" :key="index">
            <div class="left">{{ item.count }}</div>
            <div class="right">{{ item.deviceType }}</div>
          </div>
          <!-- <div class="eq-left-bottom-item-b-l-b">
            <div class="left">8</div>
            <div class="right">温度监测</div>
          </div> -->
        </div>
        <!-- <div class="eq-left-bottom-item-bottom">
          <div class="eq-left-bottom-item-b-l-b">
            <div class="left">7</div>
            <div class="right">温度监测</div>
          </div>
          <div class="eq-left-bottom-item-b-l">
            <div class="left">6</div>
            <div class="right">温度监测</div>
          </div>
        </div>
        <div class="eq-left-bottom-item-bottom">
          <div class="eq-left-bottom-item-b-l">
            <div class="left">5</div>
            <div class="right">温度监测</div>
          </div>
          <div class="eq-left-bottom-item-b-l-b">
            <div class="left">4</div>
            <div class="right">温度监测</div>
          </div>
        </div>
        <div class="eq-left-bottom-item-bottom">
          <div class="eq-left-bottom-item-b-l-b">
            <div class="left">3</div>
            <div class="right">温度监测</div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getDevicTypeCounts, getDeviceClassifyCounts } from '@/api/auth/ledger.js';
  import { onMounted } from 'vue';
  const deviceClassify = ref({});
  const countParamList = ref([]);
  const deviceList = ref([]);
  const deviceClassifyList = ref([]);
  onMounted(() => {
    getDevicTypeCount();
    getDeviceClassifyCount();
  });
  const getDevicTypeCount = () => {
    getDevicTypeCounts({ deviceType: 0 }).then((res) => {
      countParamList.value = res.data;
      console.log('res', res);
    });
    getDevicTypeCounts({ deviceType: 1 }).then((res) => {
      deviceList.value = res.data;
      console.log('res', res);
    });
  };
  const getDeviceClassifyCount = () => {
    getDeviceClassifyCounts().then((res) => {
      deviceClassifyList.value = res.data;
      console.log('res', res);
    });
  };
</script>

<style lang="scss" scoped>
  .eq-left {
    width: 360px;
    position: absolute;
    top: 120px;
    left: 18px;
    z-index: 999;
    .eq-left-top {
      width: 100%;
      .eq-left-top-title {
        width: 100%;
        height: 33px;
        background: rgba(10, 39, 82, 1);
        display: flex;
        align-items: center;
        color: #fff;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        img {
          width: 20px;
          height: 21px;
          margin: 0 5px 0 10px;
        }
      }
      .eq-left-top-content {
        padding: 0 20px;
        background: rgba(5, 30, 67, 0.6);
        height: 40vh;
        display: flex;
        flex-wrap: wrap;
        .eq-left-top-content-item {
          width: 50%;
          display: flex;
          align-items: center;
          margin: 5px 0;
          // padding: 10px 0;
          // height: 58px;
          .eq-left-top-content-item-title {
            width: 45px;
            height: 48px;
            background-image: url('../../../assets/images/home-page/it-bg.png');
            background-size: 100% 100%;
            text-align: center;
            line-height: 58px;
            font-size: 14px;
            img {
              width: 23px;
              height: 23px;
            }
          }
          .eq-left-top-content-item-right {
            margin-left: 10px;
            .eq-left-top-content-item-r-title {
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 12px;
              color: #ffffff;
              img {
                width: 10px;
                height: 12px;
                margin-right: 5px;
              }
            }
            .eq-left-top-content-item-vaule {
              span:nth-child(1) {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 18px;
                color: #ffffff;
                margin-right: 10px;
              }
              span:nth-child(2) {
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
    .eq-left-bottom {
      .eq-left-bottom-title {
        width: 100%;
        height: 33px;
        background: rgba(10, 39, 82, 1);
        display: flex;
        align-items: center;
        color: #fff;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        margin-top: 8px;
        img {
          width: 20px;
          height: 21px;
          margin-left: 10px;
        }
      }
      .eq-left-bottom-item {
        width: 360px;
        background: rgba(5, 30, 67, 0.6);
        border: 1px solid #1f4996;
        height: 35vh;
        .eq-left-bottom-item-top {
          width: 340px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 auto;
          overflow-x: scroll;
          .eq-b-top {
            .eq-b-top-bg {
              width: 79px;
              height: 71px;
              background-image: url('../../../assets/images/home-page/eq-t-bg-c.png');
              background-size: 100% 100%;
              font-family: DIN;
              font-weight: bold;
              font-size: 18px;
              color: #ffffff;
              text-align: center;
              line-height: 45px;
            }
            .eq-b-title {
              width: 79px;
              height: 24px;
              background-image: url('../../../assets/images/home-page/eq-b-bg-c.png');
              background-size: 100% 100%;
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 12px;
              color: #d5f0ff;
              text-align: center;
              line-height: 24px;
            }
          }
          $special-children: 2, 4, 6, 8;
          @each $child in $special-children {
            .eq-b-top:nth-child(#{$child}) {
              .eq-b-top-bg {
                background-image: url('../../../assets/images/home-page/eq-t-bg-b.png');
              }
              .eq-b-title {
                background-image: url('../../../assets/images/home-page/eq-b-bg-b.png');
              }
              // 可以在这里添加更多特定于这些子元素的样式
            }
          }
          // .eq-b-top-b {
          //   .eq-b-top-bg {
          //     width: 89px;
          //     height: 81px;
          //     background-image: url('../../../assets/images/home-page/eq-t-bg-b.png');
          //     background-size: 100% 100%;
          //     font-family: DIN;
          //     font-weight: bold;
          //     font-size: 24px;
          //     color: #ffffff;
          //     text-align: center;
          //     line-height: 55px;
          //   }
          //   .eq-b-title {
          //     width: 89px;
          //     height: 24px;
          //     background-image: url('../../../assets/images/home-page/eq-b-bg-b.png');
          //     background-size: 100% 100%;
          //     font-family: PingFang SC;
          //     font-weight: bold;
          //     font-size: 14px;
          //     color: #d5f0ff;
          //     text-align: center;
          //     line-height: 24px;
          //   }
          // }
        }
        .eq-left-bottom-item-bottom {
          width: 340px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          height: 23vh;
          overflow-y: scroll;
          margin: 0 auto;
          .eq-left-bottom-item-b-l {
            width: 166px;
            height: 43px;
            margin: 5px 0;
            background-image: url('../../../assets/images/home-page/eq-l-t-c.png');
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            .left {
              width: 30%;
              font-family: DINPro;
              font-weight: bold;
              font-size: 18px;
              color: #ffffff;
              text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
              text-align: center;
            }
            .right {
              width: 70%;
              font-family: PingFang SC;
              font-weight: bold;
              font-size: 14px;
              color: #ffffff;
              text-align: center;
            }
          }
          // .eq-left-bottom-item-b-l:nth-child(2, 3, 6) {
          //   background-image: url('../../../assets/images/home-page/eq-l-t-b.png');
          //   // 可以在这里添加更多特定于第二个子元素的样式
          // }
          $special-children: 2, 3, 6, 7, 10, 11, 14, 15, 18, 19;
          @each $child in $special-children {
            .eq-left-bottom-item-b-l:nth-child(#{$child}) {
              background-image: url('../../../assets/images/home-page/eq-l-t-b.png');
              // 可以在这里添加更多特定于这些子元素的样式
            }
          }
        }
      }
    }
  }
</style>
